<template>
	<div class="article">
		<!-- 1.0 头部导航 -->
		<van-nav-bar left-text="返回" left-arrow class="header" @click-left="$router.back()">
			<!-- @click-left="
				$route.query.userid
					? $router.push({
							name: 'index',
							query: {
								id: $route.query.userid,
							},
					  })
					: $router.back()
			" -->
			<template #left>
				<van-icon name="arrow-left" class="arrow-left" />
				<i class="iconnew iconfont"></i>
			</template>
			<template #right>
				<van-button round size="small" type="danger" class="unfollow danger" @click="followbtn" v-if="postDetail.has_follow">已关注</van-button>
				<van-button round size="small" type="danger" class="danger" @click="followbtn" v-else>+关注</van-button>
			</template>
		</van-nav-bar>
		<!-- @click-left="onClickLeft" @click-right="onClickRight" -->
		<!-- 2.0 文章内容 -->
		<div class="article-main" v-if="postDetail.type === 1">
			<h1 class="title">{{ postDetail.title }}</h1>
			<p class="author">
				{{ postDetail.user && postDetail.user.nickname }}
				<span>{{ postDetail.create_date | formatDate }}</span>
			</p>
			<article class="article-in" v-html="postDetail.content"></article>
		</div>
		<!-- 视频形态 -->
		<div v-else class="video-main">
			<!-- 2.2.1 视频 -->
			<div class="video-group">
				<!-- 
          PS: 梨视频网站的视频大家可以谁便拿(会审查元素就行)
            1. poster     封面照骗  
            2. src        视频播放真实地址
            3. controls   操作栏()
        -->
				<video ref="video" class="video" :poster="postDetail.cover && postDetail.cover[0].url | imgUrl" controls src="https://video.pearvideo.com/mp4/adshort/20210704/cont-1734134-15710956_adpkg-ad_hd.mp4"></video>
				<i v-show="showplay" class="iconfont iconshipin" @click="playbtn"></i>
			</div>
			<div class="videoinfo">
				<div class="userinfo">
					<van-image width="15vw" height="15vw" class="avatar" round :src="postDetail.user && postDetail.user.head_img | imgUrl"></van-image>
					<span class="nickname">{{ postDetail.user && postDetail.user.nickname }}</span>
					<van-button round size="small" type="danger" class="unfollow danger" @click="followbtn" v-if="postDetail.has_follow">已关注</van-button>
					<van-button round size="small" type="danger" class="danger" @click="followbtn" v-else>+关注</van-button>
				</div>
				<div>{{ postDetail.title }}</div>
			</div>
		</div>
		<!-- 点赞操作 -->
		<div class="like">
			<div class="btn" @click="likeFn" :class="{activit: postDetail.has_like}">
				<i class="iconfont icondianzan"></i>
				<span>{{ postDetail.like_length }}</span>
			</div>
			<div class="btn">
				<i class="iconfont iconweixin"></i>
				<span>微信</span>
			</div>
		</div>
		<!-- 评论区域 -->
		<Mycomment :postDetail="postDetail"></Mycomment>
	</div>
</template>

<script>
import {getToken} from "@/utils/localData";
import {userFollowAPI, unuserFollowAPI} from "@/apis/user";
import {getpostDetailAPI, updatelikeAPI} from "@/apis/News";
import Mycomment from "@/components/Mycomment.vue";
export default {
	data() {
		return {
			id: this.$route.query.articleId, // 为了方便，把路由的 id 存起来
			postDetail: {}, // 文章对象
			showplay: true,
		};
	},
	// 组件初始化完成
	async created() {
		const res = await getpostDetailAPI(this.id); // 根据 id 获取文章详情
		console.log(res.data.data);
		this.postDetail = res.data.data; // 数据绑定，用于页面展示数据
	},
	components: {
		Mycomment,
	},
	mounted() {
		const videodom = this.$refs.video;

		videodom.addEventListener("play", () => {
			this.showplay = false;
		});
		videodom.addEventListener("pause", () => {
			this.showplay = true;
		});
	},
	methods: {
		playbtn() {
			this.showplay = false;
			this.$refs.video.play();
		},
		async followbtn() {
			if (getToken()) {
				// 有两种情况： has_follow: true / false
				//  1. 如果是已经关注，调用取消关注的API
				//  2. 如果是未关注，调用关注的API
				if (this.postDetail.has_follow) {
					// 💥 注意这里是用户的 id（不是文章的id）
					const res = await unuserFollowAPI(this.postDetail.user.id);
					this.$toast(res.data.message);
				} else {
					//  2. 如果是未关注，调用关注的API
					const res2 = await userFollowAPI(this.postDetail.user.id);
					// console.log(res.data);
					this.$toast(res2.data.message);
				}
				// 由于页面没有刷新，所以需要主动修改 Vue 绑定的数据
				this.postDetail.has_follow = !this.postDetail.has_follow;
			} else {
				await userFollowAPI(this.postDetail.user.id);
			}
		},
		async likeFn() {
			// 💥 注意这里是传递文章 id，对文章点赞或取消点赞
			const res = await updatelikeAPI(this.id);
			console.log(res.data);
			if (this.postDetail.has_like) {
				this.postDetail.like_length--;
				this.$toast(res.data.message);
			} else {
				this.postDetail.like_length++;
				this.$toast(res.data.message);
			}
			// 状态的变化，用来更新图标颜色
			this.postDetail.has_like = !this.postDetail.has_like;
		},
	},
};
</script>

<style lang="less" scoped>
// 没有添加 scoped 表示全局样式
//  添加了 scoped 后，到底做了什么事情？？
//     1. 模板中标签自动添加 => <标签名 data-v-xxx class="box">
//     2. 选择器自动添加 => .box[data-v-82768ea8]
.header {
	.arrow-left {
		color: #ccc;
		font-size: 20px;
	}
	.iconnew {
		color: #333;
		font-size: 80px;
	}
	.danger {
		width: 58px;
		height: 28px;
	}
	.unfollow {
		background-color: #f2f2f2;
		color: #333;
		border: 1px solid #ccc;
	}
}
.article-main {
	padding: 10px;
	.title {
		font-size: 18px;
		margin: 6px 0;
		font-weight: bold;
	}
	.author {
		font-size: 14px;
		margin-bottom: 20px;
		color: rgb(148, 148, 148);
		span {
			margin-left: 4px;
		}
	}
	.article-in {
		font-size: 14px;
		// 添加了 /deep/ 后，当前选择器和其后代选择器，都不会添加 [data-v-xxx] 了
		/deep/ img {
			width: 100%;
		}

		// .article-in[data-v-59c5fdbd] p 加上deep 会把这个哈希值加到上一级
		// ::v-deep
		/deep/ p {
			// color: red;
			text-indent: 2em;
			line-height: 1.5;
		}
	}
}
.like {
	display: flex;
	justify-content: space-around;
	align-items: center;
	height: 100px;
	padding: 20px 0;
	.activit {
		color: red;
	}
	.btn {
		width: 80px;
		height: 30px;
		border: 1px solid #ccc;
		border-radius: 15px;
		display: flex;
		justify-content: center;
		align-items: center;
		.iconweixin {
			color: green;
		}
		i {
			margin-right: 8px;
		}
	}
}
// 视频页面
.video-main {
	.video-group {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		.video {
			width: 100%;
			height: 300px;
			background-color: #666;
		}

		.iconshipin {
			font-size: 50px;
			color: #fff;
			width: 60px;
			height: 60px;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.5);
			position: absolute;
			z-index: 1;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.videoinfo {
		padding: 10px;
	}
	.userinfo {
		display: flex;
		height: 50px;
		align-items: center;
		padding-bottom: 8px;
		.avatar {
			width: 25px;
			height: 25px;
			margin-right: 10px;
		}
		.nickname {
			flex: 1;
		}
	}
}
</style>
